<template>
    <view :style="{ '--color': color }">
        <status-bar title="开柜存餐" :back="back"></status-bar>
        <view class="Wrapper">
            <block v-for="(item, index) in pageData" :key="index">
                <view class="list" @click.stop="opencabinet(item)" :class="{ occupy: item.state == 1, Idle: item.state == 2, Start: item.state === 0 }">
                    <text class="serialNumber">{{ item.posno }}</text>
                    <text class="info">{{ item.stateName }}</text>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                devno: '',
                order_code: '',
                pageData: []
            };
        },
        onLoad(opt) {
            if (opt.devno) this.devno = opt.devno;
            if (opt.order_code) this.order_code = opt.order_code;
            this.boxsGet();
        },
        methods: {
            boxsGet() {
                this.$http
                    .get({
                        url: '/SmartLockerApi/boxsGet',
                        data: {
                            devno: this.devno
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.pageData = result;
                    });
            },
            async opencabinet(item) {
                const result = await this.$Modals('开柜', `是否确定开柜 ${item.posno}？`);
                if (!result) return;
                this.expressPost(item);
            },
            expressPost(item) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SmartLockerApi/expressPost',
                        data: {
                            shelfno: item.shelfno,
                            order_code: this.order_code,
                            devno: this.devno
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.$Modals('提示', `${item.posno} 开柜成功`);
                    });
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        padding: 20rpx;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 20rpx;
        column-gap: 10rpx;
        .list {
            // height: 100rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            border-radius: 6rpx;
            overflow: hidden;
            padding: 10rpx 0;

            .serialNumber {
                font-size: 32rpx;
                font-weight: 500;
            }
            .info {
                font-size: 28rpx;
            }
        }
        .occupy {
            border: 1px solid #bababa;
            background-color: #f2f2f2;
            color: #999;
        }
        .Idle {
            border: 1px solid var(--color);
            color: var(--color);
        }
        .Start {
            border: 1px solid var(--color);
            background-color: var(--color);
            color: #fff;
        }
    }
</style>
